<template>
    <view class="list-list">
        <view class="list-item" v-for="(item, index) in dataList" :key="index" @tap="toPage(path, item.id)">
            <view class="list-label">
                <view class="recheck" v-if="item.recheck.value == 1">已复检</view>
                <view class="no-recheck" v-else>未复检</view>
                <view class="deptType" v-if="item.deptType">{{ item.deptType.note }}</view>
            </view>
            <view class="name" v-if="item.name">{{ item.name }}</view>
            <view class="name" v-else>{{ item.deptName }}</view>
            <view class="list-mess">
                <view v-if="item.areaCode">
                    <img src="../../static/list/area.png" alt="" />
                    所属区域：{{ item.areaCode.note }}
                </view>
                <view>
                    <img src="../../static/list/year.png" alt="" />
                    登记年份：{{ item.annual }}
                </view>
            </view>
        </view>
        <view class="none" v-if="dataList.length === 0">
            <view><image src="../../static/list/empty.png" mode=""></image></view>
            <view>暂无内容</view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cc-list',
    props: {
        //数据
        dataList: {
            type: Array,
            default: () => {
                return []
            },
        },
        path: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            url: this.$baseUrl,
        }
    },
    mounted() {
        // console.log(this.$baseUrl);
    },
    methods: {
        toPage(url, id) {
            uni.navigateTo({
                url: url + '?id=' + id,
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.list-list {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;

    .none {
        text-align: center;

        image {
            width: 270rpx;
            height: 352rpx;
            margin: 20rpx 0 5rpx;
        }
    }

    .list-item {
        width: 100%;
        padding: 30rpx;
        height: auto;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        border: 1px solid #d8d8d8;
        border-radius: 16rpx;
        .name {
            font-family: Source Han Sans CN;
            font-size: 30rpx;
            font-weight: normal;
            line-height: 30rpx;
            color: #3d3d3d;
            margin: 30rpx 0;
            word-break: break-all;
        }
        .list-label,
        .list-mess {
            display: flex;
            align-items: center;
            img {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
            }
        }
        .recheck,
        .no-recheck {
            font-family: PingFang SC;
            font-size: 24rpx;
            font-weight: normal;
            text-align: center;
            color: #ffffff;
            padding: 10rpx 16rpx;
            border-radius: 4px;
            margin-right: 24rpx;
            background: #07b9b9;
        }
        .no-recheck {
            background: #ff8f1f;
        }
        .deptType {
            border-radius: 4px;
            border: 1px solid #a81320;
            font-size: 20rpx;
            font-weight: normal;
            padding: 10rpx 16rpx;
            background: #ffefef;
            color: #a81320;
        }
        .list-mess {
            color: #999999;
            font-size: 24rpx;
            line-height: 36rpx;
            > view {
                display: flex;
                align-items: center;
                margin-right: 64rpx;
            }
        }
    }
}
</style>
